<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="1" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
        </Row>
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-total show-sizer/>
        </div>
    </div>
</template>
<script>
import { post } from  '@/api/http'
import store from '@/store'
import { get_account_transactions } from  '@/api'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '流水号',key: 'TransactionNumber'
                },
                {
                    title: '交易时间',key: 'TransactionTime'
                },
                {
                    title: '收支类型',key: 'TransactionFlow',
                    render: (h, params) => {
                        if (params.row.TransactionFlow=='Expense'){
                             return h('span',{
                                style: {
                                    color: '#ed4014'
                                }
                            },'支出')
                        }else if (params.row.TransactionFlow=='Income'){
                            return h('span',{
                                style: {
                                    color: '#19be6b',
                                }
                            },'收入')
                        }else {
                            return  h('p', 'Unknown')
                        }
                    }
                },
                {
                    title: '交易类型',key: 'TransactionType',
                    render: (h, params) => {
                        if (params.row.TransactionType=='Consumption'){
                            return  h('p', '消费')
                        }else if (params.row.TransactionType=='Payment'){
                            return  h('p', '充值')
                        }else {
                            return  h('p', 'Unknown')
                        }
                    }
                },
                {
                    title: '交易渠道',key: 'TransactionChannel',
                    render: (h, params) => {
                        if (params.row.TransactionChannel=='AccountBalance'){
                            return  h('p', '用户余额')
                        }else if (params.row.TransactionChannel=='Alipay'){
                            return  h('p', '支付宝')
                        }else {
                            return  h('p', 'Unknown')
                        }
                    }
                },
                {
                    title: '交易渠道流水号',key: 'TransactionChannelSN'
                },
                {
                    title: '资金形式',key: 'FundType',
                    render: (h, params) => {
                        if (params.row.FundType=='Cash'){
                            return  h('p', '现金')
                        }else {
                            return  h('p', 'Unknown')
                        }
                    }
                },
                {
                    title: '交易单号',key: 'RecordID'
                },
                {
                    title: '交易备注',key: 'Remarks'
                },
                {
                    title: '账期',key: 'BillingCycle'
                },
                {
                    title: '金额',key: 'Amount',
                    render: (h, params) => {
                        if (params.row.TransactionType=='Consumption'){
                            let value = "-￥ "+params.row.Amount
                            return h('span',{
                                style: {
                                    color: '#ed4014'
                                }
                            },value)
                        }else {
                            let value = "+￥ "+params.row.Amount
                            return h('span',{
                                style: {
                                    color: '#19be6b',
                                }
                            },value)
                        }
                    }
                },
                {
                    title: '余额',key: 'Balance',
                    render: (h,params) =>{
                        let value = "￥ "+params.row.Balance
                        return h('span',value)
                    }
                },

                // {
                //     title: '操作',slot: 'action',width: 100,align: 'center'
                // }
            ],
            // 分页
            show_list: [],
            total: 0,
            pageSize: 10,
            page: 1,
        }
    },
    methods: {
		btn_refresh(){
            this.refresh()
        },
        changePage(page) {
            this.page=page
            this.refresh()
        },
        // 每页条数变更
        changePageSize(pageSize){
            console.log(pageSize)
            this.pageSize = pageSize
            this.refresh()
        },
        refresh() {
           let params = {
                "pageSize":this.pageSize,
                "page":this.page,
            }
            post(get_account_transactions,{},{},3000,params).then(response=>{
                // console.log(response.data)
                let data = response.data.Data
                this.total  = data.TotalCount
                this.show_list = data.AccountTransactionsList.AccountTransactionsList
            })
        }

    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>